<template>
  <a-modal v-model:visible="visible">
    <template #title> 注册 </template>
    <a-form :model="form" @submit="handleSubmit"
      ><a-form-item field="account" label="账号" required>
        <a-input v-model="form.account" placeholder="请输入账号">
          <template #prefix>
            <icon-user />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item field="password" label="密码" required>
        <a-input-password
          v-model="form.password"
          placeholder="请输入密码"
          allow-clear
        >
          <template #prefix>
            <icon-lock />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item field="againPwd" label="再次输入密码" required>
        <a-input-password
          v-model="form.againPwd"
          placeholder="请再次输入密码"
          allow-clear
        >
          <template #prefix>
            <icon-lock />
          </template> </a-input-password></a-form-item
    ></a-form>
    <template #footer>
      <a-button type="primary" @click="saveuserInfo">确定</a-button>
      <!-- <a-button type="primary" @click="$refs.formRef.resetFields()">Reset</a-button> -->
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { registerUser } from '@/api/user';
import { Message } from '@arco-design/web-vue';

const visible = ref(false);

const form = reactive({
  account: '',
  password: '',
  againPwd: '',
});

const saveuserInfo = async () => {
  if (form.account === '') {
    Message.error('请输入账号');
    return;
  }
  if (form.password === '') {
    Message.error('请输入密码');
    return;
  }
  if( form.againPwd === ''){
    Message.error('请再次输入密码');
    return
  }
  if (form.password !== form.againPwd) {
    Message.error('两次输入的密码不一致');
    return;
  }
  const { code, message, data } = await registerUser(form);
  if (code === 200 || data === '注册成功') {
    Message.success(message);
    visible.value = false;
  }
};

const openDialog = () => {
  visible.value = true;
};

defineExpose({
  openDialog,
});
</script>

<style lang="scss" scoped>
</style>